<header id="top">
  <div class="top">
    <a href="index.html">
      <img src="img/header/logo.png" alt="">
    </a>
    <span>欢迎注册</span>
  </div>
</header>


<div class="parent">
  <div class="container">
    <div class="panel rt">
      <form id="form-register">
        <div class="txt">
          <p>新用户注册
            <span>
              <a routerLink="/login">直接登录</a>
            </span>
          </p>
        </div>
        <div class="form-group">
          <label for="uname">用户名：</label>
          <input autocomplete="" required="" minlength="3" maxlength="12" type="text" placeholder="请输入用户名" autofocus="" name="uname" id="uname">
          <span class="msg-error">用户名不能为空</span>
        </div>
        <div class="form-group">
          <label for="upwd">登录密码：</label>
          <input required="" type="password" minlength="6" maxlength="12" placeholder="请输入密码" name="upwd" autofocus="" id="upwd">
          <span class="msg-default hidden">密码长度在6到12位之间</span>
        </div>
        <div class="form-group">
          <label for="upwdconfirm">确认密码：</label>
          <input required="" type="password" minlength="6" maxlength="12" placeholder="请确认密码" name="upwdconfirm" autofocus="" id="upwdconfirm">
          <span class="msg-default hidden">密码长度在6到12位之间</span>
        </div>
        <div class="form-group">
          <label for="email">邮箱：</label>
          <input autocomplete="" required="" type="email" placeholder="请输入邮箱地址" name="email" id="email">
          <span class="msg-default hidden">请输入合法的邮箱地址</span>
        </div>
        <div class="form-group">
          <label for="phone">手机号：</label>
          <input id="phone" name="phone" placeholder="请输入您的手机号" pattern="(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$" required="" type="text">
          <span class="msg-default hidden">请输入合法的手机号</span>
        </div>
        <div class="form-group">
          <label></label>
          <input type="button" value="提交注册信息" id="bt-register">
        </div>
      </form>
    </div>
  </div>
</div>

<app-footer></app-footer>